<p>Content security policy (CSP) (fetch directives) is a <a href="https://www.w3.org/TR/CSP3/">W3C standard </a> which is used by a server to specify,
via a http header, the origins from where the browser is allowed to load resources. It can help to mitigate the risk of cross site scripting (XSS)
attacks and reduce privileges used by an application. If the website doesn’t define CSP header the browser will apply <a
href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a> by default.</p>
<pre>
Content-Security-Policy: default-src 'self'; script-src ‘self ‘ http://www.example.com
</pre>
<p>In the above example, all resources are allowed from the website where this header is set and script resources fetched from example.com are also
authorized:</p>
<pre>
&lt;img src="selfhostedimage.png&gt;&lt;/script&gt; &lt;!-- will be loaded because default-src 'self'; directive is applied  --&gt;
&lt;img src="http://www.example.com/image.png&gt;&lt;/script&gt;  &lt;!-- will NOT be loaded because default-src 'self'; directive is applied  --&gt;
&lt;script src="http://www.example.com/library.js&gt;&lt;/script&gt; &lt;!-- will be loaded because script-src ‘self ‘ http://www.example.comdirective is applied  --&gt;
&lt;script src="selfhostedscript.js&gt;&lt;/script&gt; &lt;!-- will be loaded because script-src ‘self ‘ http://www.example.com directive is applied  --&gt;
&lt;script src="http://www.otherexample.com/library.js&gt;&lt;/script&gt; &lt;!-- will NOT be loaded because script-src ‘self ‘ http://www.example.comdirective is applied  --&gt;
</pre>
<h2>Ask Yourself Whether</h2>
<ul>
  <li> The resources of the application are fetched from various untrusted locations. </li>
</ul>
<p>There is a risk if you answered yes to this question.</p>
<h2>Recommended Secure Coding Practices</h2>
<p>Implement content security policy fetch directives, in particular <em>default-src</em> directive and continue to properly sanitize and validate all
inputs of the application, indeed CSP fetch directives is only a tool to reduce the impact of cross site scripting attacks.</p>
<h2>Sensitive Code Example</h2>
<p>In a Express.js application, the code is sensitive if the <a href="https://www.npmjs.com/package/helmet">helmet</a> contentSecurityPolicy
middleware is disabled:</p>
<pre>
const express = require('express');
const helmet = require('helmet');

let app = express();
app.use(
    helmet({
      contentSecurityPolicy: false, // sensitive
    })
);
</pre>
<h2>Compliant Solution</h2>
<p>In a Express.js application, a standard way to implement CSP is the <a href="https://www.npmjs.com/package/helmet">helmet contentSecurityPolicy
middleware</a>:</p>
<pre>
const express = require('express');
const helmet = require('helmet');

let app = express();
app.use(helmet.contentSecurityPolicy()); // Compliant
</pre>
<h2>See</h2>
<ul>
  <li> OWASP - <a href="https://owasp.org/Top10/A05_2021-Security_Misconfiguration/">Top 10 2021 Category A5 - Security Misconfiguration</a> </li>
  <li> <a href="https://www.w3.org/TR/CSP3/">w3.org</a> - Content Security Policy Level 3 </li>
  <li> OWASP - <a href="https://owasp.org/www-project-top-ten/2017/A6_2017-Security_Misconfiguration">Top 10 2017 Category A6 - Security
  Misconfiguration</a> </li>
  <li> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">developer.mozilla.org</a> - Content Security Policy (CSP) </li>
</ul>
